package com.servlet.response; /**
 * @author wzm
 * @create 2023-06-25 10:10
 */

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/rs03")
public class ResponseServlet03 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //解决响应乱码
        //方式一
       // response.setCharacterEncoding("UTF-8");//设置服务器的字符集为UTF-8
        //通过设置响应头设置浏览器也要使用UTF-8对当前响应的内容进行解析
        //response.setHeader("Content-Type","text/html;charset=UTF-8");

        //方式二 (推荐)
        //同时设置服务器和客户端都使用UTF-8编码并设置响应头
        response.setContentType("text/html;charset=UTF-8");


        //设置响应内容
        //1.响应字符内容到浏览器
        //响应字符串aaa
        PrintWriter writer = response.getWriter();//字符输出流
        //向浏览器写字符串
        writer.write("aaa");
        writer.write("<h1>你好，我是响应回来的数据</h1>");
        writer.write("<!DOCTYPE html>\n" +
                "<html lang=\"en\">\n" +
                "\n" +
                "<head>\n" +
                "    <meta charset=\"UTF-8\">\n" +
                "    <meta name=\"viewport\" content=\"width=\\, initial-scale=1.0\">\n" +
                "    <title>Document</title>\n" +
                "    <style>\n" +
                "        /* 字体样式 */\n" +
                "        .net {\n" +
                "            font-family: '华文行楷', \"楷体\", '黑体';\n" +
                "            /*字体样式  */\n" +
                "            font-size: 50px;\n" +
                "            /* 字体大小 */\n" +
                "            font-weight: bold;\n" +
                "            /* 字重 加粗 */\n" +
                "            font-style: oblique;\n" +
                "            /* 字体风格 */\n" +
                "            color: blueviolet;\n" +
                "            /* 字体颜色 */\n" +
                "        }\n" +
                "\n" +
                "        /* 文本样式 */\n" +
                "        .new a {\n" +
                "            /* height: 50px;\n" +
                "            background-color: red; */\n" +
                "            /* 行高 行高如果=文字所在父元素高度会垂直居中 */\n" +
                "            line-height: 50px;\n" +
                "            /* 划线 */\n" +
                "            text-decoration: line-through;\n" +
                "            /* 字符间距 */\n" +
                "            letter-spacing: 150px;\n" +
                "            /* text-transform: uppercase; 大写 */\n" +
                "            text-transform: lowercase;\n" +
                "            /* 小写 */\n" +
                "\n" +
                "\n" +
                "        }\n" +
                "\n" +
                "        .pic {\n" +
                "            /* 文字阴影 x值 y值  模糊半径  颜色 */\n" +
                "            text-shadow: 1px 1px 1px #FF0000;\n" +
                "\n" +
                "            /* 文本对齐方式 */\n" +
                "            text-align: right;\n" +
                "        }\n" +
                "\n" +
                "\n" +
                "        /* 背景样式 */\n" +
                "        .box {\n" +
                "            width: 500px;\n" +
                "            height: 300px;\n" +
                "            /* 背景颜色 */\n" +
                "            /* background-color: pink; */\n" +
                "\n" +
                "            /* 简写 跟图片显示背景图 跟颜色显示背景颜色 */\n" +
                "            /* background: url(../imgs/001.png); */\n" +
                "\n" +
                "            /* 背景图 相当于写当前css文件的路径 */\n" +
                "            /* background-image: url(../imgs/001.png); */\n" +
                "            /* 背景图在比容器小的时候 默认图片会有平铺的效果 */\n" +
                "            /* 设置背景图的平铺效果 */\n" +
                "            /* background-repeat: no-repeat; */\n" +
                "\n" +
                "            /* 背景图位置  x方向位置  y轴方向位置\n" +
                "            使用数值\n" +
                "            使用关键字： left center right水平    top center buttom垂直方向\n" +
                "            */\n" +
                "            /* background-position: right bottom; */\n" +
                "\n" +
                "            /* 设置背景图的大小 \n" +
                "            数值+px\n" +
                "            */\n" +
                "            /* background-size: 500px 300px; */\n" +
                "            /* cover 等比例缩放图片 让其完全覆盖背景区可能有部分图片会看不见 */\n" +
                "            /* background-size: cover; */\n" +
                "\n" +
                "            /* 等比例缩放图片 让图片完全装在容器中 但是背景可能空白 */\n" +
                "            /*   background-size: contain; */\n" +
                "\n" +
                "            /* 使用父元素尺寸计算图片的大小 */\n" +
                "            /*  background-size: 100% 100%; */\n" +
                "\n" +
                "\n" +
                "            /* 背景的多个属性可以简写成符合属性 颜色 图片 平铺 位置x  位置y/x宽度 y宽度 \n" +
                "             空格隔开各个属性值 不区分顺序 单值位置和大小之间需要使用/\n" +
                "            */\n" +
                "            background: pink url(../imgs/001.png) no-repeat center center/100% 100%;\n" +
                "        }\n" +
                "\n" +
                "        body {\n" +
                "            height: 3000px;\n" +
                "            background: url(../imgs/aaa.jpg) no-repeat;\n" +
                "            /* 背景图固定 */\n" +
                "            background-attachment: fixed;\n" +
                "        }\n" +
                "    </style>\n" +
                "</head>\n" +
                "\n" +
                "<body>\n" +
                "    <ul class=\"content\">\n" +
                "        <li class=\"net\">网页</li>\n" +
                "        <li class=\"new\"><a href=\"#\">新闻aaaaAAA</a></li>\n" +
                "        <li class=\"pic\">图片</li>\n" +
                "        <li class=\"ti\">贴吧</li>\n" +
                "    </ul>\n" +
                "\n" +
                "    <div class=\"box\">5</div>\n" +
                "\n" +
                "</body>\n" +
                "\n" +
                "</html>");

        /*响应浏览器数据 支持普通字符串和html标签，但是servlet响应html极其复杂*/

    }
}
